<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/webuploader/0.1.1/webuploader.css"
	rel="stylesheet">
</head>
<body>
	<div id="uploader" class="wu-example">
		<!--用来存放文件信息-->
		<div id="thelist" class="uploader-list"></div>
		<div class="btns">
			<div id="attach"></div>
			<input type="button" value="上传" id="upload" />
		</div>
	</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webuploader/0.1.1/webuploader.html5only.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.8/uuid.min.js"></script>
<script type="text/javascript">
var path = "<%=path%>";
$(function() {
	var $list = $("#thelist");
	var uploader;// 实例化     
	var fileId = "";
	var chunks = 0;	//总片数
	uploader = WebUploader.create({
		auto : true, //是否自动上传
		pick : {
			id : '#attach',
			name : "multiFile", //这个地方 name 没什么用，和fileVal 配合使用。  
			label : '点击选择文件,会自动上传',
			multiple : false
		},
		fileVal : 'multiFile', //自定义file的name属性，我用的版本是0.1.5 ,打开客户端调试器发现生成的input 的name 没改过来。
		server : path + "/testUpload/webUploader",
		duplicate : true,//是否可重复选择同一文件  
		resize : false,
		chunked : true, //分片处理  
		chunkSize : 1 * 1024 * 1024, //每片20M  
		chunkRetry : 2,//如果失败，则不重试  
		threads : 4,//上传并发数。允许同时最大上传进程数。  
		compress : false,
		disableGlobalDnd : true
	});

	// 当有文件添加进来的时候  
	uploader.on("fileQueued", function(file) {
		$list.append("<div id='"+  file.id + "' class='item'>"
				+ "<h4 class='info'>" + file.name + "</h4>"
				+ "<p class='state'>正在上传...</p>" + "</div>");

		fileId = uuid.v4();
		console.log("==fileId==" + fileId);
	});

	//当文件上传成功时触发。  
	uploader.on("uploadSuccess", function(file, response) {
		console.log(file);
		console.log(response);
		$.post(path + "/testUpload/uploadSuccess",{
			fileId: fileId,
			chunks: chunks,
			fileExtName: file.ext,
			beanName: "testOperator"
		},function(){
			
		},"json");
	});

	uploader.on("uploadError", function(file) {
		$("#" + file.id).find("p.state").text("上传出错");
		uploader.cancelFile(file);
		uploader.removeFile(file, true);
		uploader.reset();
	});

	uploader.on('uploadBeforeSend', function(block, data) {
		data.uid = fileId;
		chunks = block.chunks;
	});
});
</script>
</html>